<template>
	<div v-if="isOk" class="product-detail">
		<i class="iconfont icon-left back-btn" @click="goBack"></i>
		<!--swiper-->
		<mt-swipe :auto="4000" style="height: 5rem;" class="bg">
			<mt-swipe-item v-for="(item,idx) in productInfo.goods.goods_photos" :key="idx">
				<img :src="item" />
			</mt-swipe-item>
		</mt-swipe>
		<div class="product-info">
			<div class="title">
				{{productInfo.goods.name}}
			</div>
			<ul class="color-gray">
				<li>
					<div class="current-price">&#165;{{productInfo.goods.goods_current_price}}</div>
				</li>
				<!--<li>
					<div class="original-price flexbox">价格 <span>&#165; {{productInfo.goods.goods_current_price}}</span></div>
				</li>-->
				<!--<li class="vice-info flexbox flex-middle flex-justify">
					<div>快递：{{productInfo.courier}}</div>
					<div>月销{{productInfo.sales}}笔</div>
					<div>{{productInfo.address}}</div>
				</li>-->
				<li class="vice-info flexbox flex-middle flex-justify">
					<div>库存: {{productInfo.goods.goods_inventory}}</div>
				</li>
			</ul>
		</div>
		<!--优惠券-->
		<div class="get-discount">
			<ul>
				<li v-if="couponList.length > 0" class="flexbox flex-middle" @click="isCopun = true">
					<div class="flex1">领取优惠券</div>
					<i class="iconfont icon-rightarrow"></i>
				</li>
				<!--<li class="flexbox flex-middle">
					<div class="flex1">
						购买可得<span>5</span>积分
					</div>
					<i class="iconfont icon-rightarrow"></i>
				</li>-->
				<!--<li class="flexbox flex-middle flex-left">
					<div class="flex1">
						<span>
							<i class="iconfont icon-dui"></i>正品保证
						</span>
						<span>
							<i class="iconfont icon-dui"></i>极速退款
						</span>
						<span>
							<i class="iconfont icon-dui"></i>七天退换
						</span>
					</div>
					<i class="iconfont icon-rightarrow"></i>
				</li>-->
			</ul>
		</div>
		<!--购买产品，参数-->
		<div class="purchase-info">
			<ul>
				<!--<li class="flexbox flex-justify flex-middle">
					<span>选择口味</span>
					<i class="iconfont icon-rightarrow"></i>
				</li>-->
				<!--<li class="flexbox flex-justify flex-middle" @click="isParam = true">
					<span>产品参数</span>
					<i class="iconfont icon-rightarrow"></i>
				</li>-->
				<li class="flexbox flex-justify flex-middle" @click="isParam = true">
					<span>产品型号</span>
					<i class="iconfont icon-rightarrow"></i>
				</li>
			</ul>
		</div>
		<!--评价-->
		<!--<div class="user-rating">
			<div class="title flexbox flex-middle flex-center">
				<div class="line"></div>
				<div class="title-text">
					<i class="iconfont icon-message"></i> 评价
				</div>
				<div class="line"></div>
			</div>
			<div class="rate-content bg-white">
				<div class="subtitle">
					宝贝评价（140）
				</div>
				<div class="rate-tags">
					<span v-for="item in rateTags">{{item.content}}（{{item.score}}）</span>
				</div>
			</div>
			<div class="best-rate">
				<div class="user-info flexbox flex-middle">
					<i class="iconfont icon-user"></i>
					<span>大***妖怪</span>
					<div class="user-score">
						<i class="iconfont icon-guanzhu"></i>
						<i class="iconfont icon-guanzhu"></i>
						<i class="iconfont icon-guanzhu"></i>
						<i class="iconfont icon-guanzhu"></i>
					</div>
				</div>
				<div class="rate-message">
					出于安全的考虑以及网监部门的规定，草料针对免费用户使用跳转码设置了网址白名单，即对于免费用户，只有输入的网址域名在白名单中时，才能直接跳转，否则将会出现一个中间页,付费用户由于签订了使用安全协议，受其制约，所有的跳转码都不会出现中间页
				</div>
				<div class="purchase-rate">
					颜色分类：黑色；尺码：L
				</div>
				<div class="text-center">
					<button class="check-rates">查看全部评价</button>
				</div>
			</div>
		</div>
		<div class="about-shop">
			<div class="shop-logo flexbox flex-middle">
				<img class="shop-portrait" src="../../assets/images/common/head.png" />
				<div class="flex1">
					<p class="pd-ellipsis">太平鸟旗舰店</p>
					<span>天猫</span>
				</div>
			</div>
			<div class="shop-detail-info flexbox  text-center">
				<div class="flex1">
					<p>264</p>
					<span>全部宝贝</span>
				</div>
				<div class="flex1">
					<p>71.4万</p>
					<span>关注人数</span>
				</div>
				<div class="flex1">
					<ul>
						<li>宝贝描述 <span class="score">4.9</span><span class="grade">高</span></li>
						<li>卖家服务 <span class="score">4.9</span><span class="grade">高</span></li>
						<li>物流服务 <span class="score">4.9</span><span class="grade">高</span></li>
					</ul>
				</div>
			</div>
			<div class="text-center">
				<button class="link-shop">进店逛逛</button>
			</div>
		</div>-->
		<!--图片介绍-->
		<div class="img-intro">
			<div class="title flexbox flex-middle flex-center">
				<div class="line"></div>
				<div class="title-text"><i class="iconfont icon-xiangqing"></i> 详情</div>
				<div class="line"></div>
			</div>
			<div class="img-box" v-html="productInfo.goods.goods_details"></div>
		</div>
		<!--领取优惠券panel-->
		<div class="copun-panel" :class="isCopun ? 'in' : 'out'">
			<h3>领取优惠券</h3>
			<div class="copun-item" v-for="n in 5" :key="n">
				<div class="copun">
					<h3>10</h3>
					<p>订单金额满299元可使用</p>
					<p>有效期至2018-1-1</p>
				</div>
				<div class="get-btn">
					立即领取
				</div>
			</div>
		</div>
		<!--商品型号-->
		<div class="param-panel" :class="isParam ? 'in' : 'out'">
			<h3>选择类型</h3>
			<div class="param-item" v-for="(item,$index) in productInfo.generic_spec" :key="item.id">
				<p>{{item.name}}</p>
				<span v-for="(n,idx) in item.value" @click="handleChangeParam($index,idx,n)" :key="n.id" :class="{'active': item.checked == n.id}">{{n.value}}</span>
			</div>
			<div class="num">
				<p>购买数量：</p>
				<div class="input-number">
					<i class="iconfont icon-sub" @click="num --; num == 0 ? num = 1 : ''"></i>
					<input v-model="num" type="tel" max="10" min="1" />
					<i class="iconfont icon-plus" @click="num++;num > productInfo.goods.goods_inventory ? num = productInfo.goods.goods_inventory : ''"></i>
				</div>
			</div>
			<button type="button" @click="isParam = false">确定</button>
		</div>

		<!--dialog-->
		<div class="dialog" v-if="isCopun || isParam" @click="isCopun = false;isParam = false;"></div>
		<!--bottom-->
		<div class="detail-bottom">
			<!--<span @click="$router.push('/store?storeId=' + productInfo.goods.store_id)">店铺</span>-->
			<span></span>
			<span @click="addToCart">加入购物车</span>
			<span @click="rightNowBuy">立即购买</span>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		name: 'product-detail',
		data() {
			return {
				isCopun: false,
				isParam: false,
				isOk: false,
				num: 1,
				productInfo: {},
				rateTags: [{
					content: '好看',
					score: 5
				}, {
					content: '质量好',
					score: 2
				}, {
					content: '不正宗',
					score: 1
				}, {
					content: '快递快',
					score: 4
				}, {
					content: '非常满意',
					score: 15
				}, {
					content: '满意',
					score: 15
				}],
				couponList: []
			}
		},
		methods: {
			getData() {
				this.$http.post('/mobliegoods/goods.htm', {
					id: this.$route.query.id
				}).then(res => {
					if(res.code == 0) {
						var data = res.data;
						for(var i = 0, len = data.generic_spec.length; i < len; i++) {
							// data.generic_spec[i].checked = data.generic_spec[i].value[0].id;
							data.generic_spec[i].checked = '';
						}
						this.productInfo = data;
						this.isOk = true;
						this.getCoupon();
					}
				})
			},
			goBack() {
				history.go(-1);
			},
			handleChangeParam($index, idx, row) {
				this.productInfo.generic_spec[$index].checked = row.id;
				var data = this.productInfo.generic_spec,
					str = '';
				for(var i = 0, len = data.length; i < len; i++) {
					str += data[i].checked + ',';
				}
				this.$http.post('/mobliegoods/load_goods_gsp.htm', {
					gsp: str,
					id: this.$route.query.id
				}).then(res => {
					if(res.code == 0) {
						this.productInfo.goods.goods_current_price = res.data.price;
					}
				})
			},
			getCoupon() {
				this.$http.post('/mobliecart/goods_couponInfo.htm', {
					store_id: this.productInfo.goods.store_id
				}).then(res => {
					if(res.code == 0) {
						this.couponList = res.data || [];
					}
				})
			},
			addToCart() {
				if(sessionStorage.getItem('loginInfo')) {
					var data = this.productInfo.generic_spec,
						str = "";
					for(var i = 0, len = data.length; i < len; i++) {
						if(!data[i].checked) {
							Toast('请先选择商品类型');
							this.isParam = true;
							return;
						} else {
							str += data[i].checked + ',';
						}
					}
					this.$http.post('/mobliecart/add_goods_cart.htm', {
						id: this.$route.query.id,
						count: this.num,
						store_price: this.productInfo.goods.goods_current_price,
						gsp: str,
						buy_type: ''
					}).then(res => {
						if(res.code == 0) {
							Toast('添加成功');
							sessionStorage.setItem('tabbarItem', 'cart');
							this.$router.push('/cart');
						}
					})
				} else {
					this.$router.push('/not_login');
				}
			},
			rightNowBuy() {
				if(sessionStorage.getItem('loginInfo')) {
					var data = this.productInfo.generic_spec;
					for(var i = 0, len = data.length; i < len; i++) {
						if(!data[i].checked) {
							Toast('请先选择商品类型');
							this.isParam = true;
							return;
						}
					}
					this.$http.post('/mobliecart/add_goods_cart.htm', {
						id: this.$route.query.id,
						count: this.num,
						store_price: this.productInfo.goods.goods_current_price,
						gsp: '',
						buy_type: ''
					}).then(res => {
						if(res.code == 0) {
							Toast('添加成功');
						}
					})
				} else {
					this.$router.push('/not_login');
				}
			}
		},
		created() {
			this.api.setHeader('商品详情');
			this.getData();
		},
		watch: {
			num: function(val) {
				this.$http.post('/mobliecart/goods_count_adjust.htm', {
					cart_id: '',
					count: val,
					store_id: ''
				}).then(res => {
					if(res.code == 0) {

					}
				})
			}
		}
	}
</script>

<style lang="less">
	.color-gray {
		color: #999;
	}
	
	.product-detail {
		.icon-rightarrow {
			font-size: 0.26rem;
			color: #ccc;
		}
		.product-info {
			padding: 0.2rem;
			border-bottom: 0.16rem solid #f4f4f4;
			.title {
				position: relative;
				font-size: 0.3rem;
				color: #333;
				display: -webkit-box !important;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				word-break: break-all;
				margin-bottom: 0.1rem;
			}
			ul {
				li {
					.current-price {
						color: #ff5000;
						font-size: 0.34rem;
						display: flex;
						align-items: center;
						div {
							height: 0.3rem;
							line-height: 0.3rem;
							margin-left: 0.2rem;
							font-size: 0.20rem;
							vertical-align: middle;
							border: 1px solid #ff5000;
							border-radius: 0.03rem;
						}
					}
					.original-price {
						margin: 0.15rem 0;
						span {
							text-decoration: line-through;
						}
					}
				}
			}
		}
		.get-discount {
			background-color: #fafafa;
			padding: 0 0.2rem;
			border-bottom: 0.16rem solid #f4f4f4;
			li {
				height: 0.8rem;
				border-bottom: 1px solid #eee;
				font-size: 0.26rem;
				color: #666;
				.flex1 {
					img {
						height: 0.24rem;
						margin-right: 0.1rem;
						&.discount-icon {
							width: 1.2rem;
						}
						&.integral-icon {
							width: 0.5rem;
						}
					}
				}
			}
		}
		.purchase-info {
			padding: 0 0.2rem;
			ul {
				li {
					height: 0.86rem;
					background-color: #fff;
					font-size: 0.26rem;
					color: #000;
					&:first-child {
						border-bottom: 1px solid #eee;
					}
				}
			}
		}
		.user-rating {
			border-bottom: 0.1rem solid #eee;
			.title {
				height: 0.8rem;
				background-color: #f4f4f4;
				.line {
					width: 0.9rem;
					height: 1px;
					background-color: #999;
				}
				.title-text {
					font-size: 0.26rem;
					color: #999;
					margin: 0 0.2rem;
				}
			}
			.rate-content {
				padding: 0.3rem 0.2rem 0;
				.subtitle {
					font-size: 0.26rem;
					color: #000;
					margin-bottom: 0.24rem;
				}
				.rate-tags {
					display: -webkit-box !important;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					span {
						display: inline-block;
						font-size: 0.24rem;
						color: #000;
						margin: 0 0.2rem 0.24rem 0;
						height: 0.6rem;
						line-height: 0.6rem;
						padding: 0 0.3rem;
						border-radius: 0.51rem;
						background-color: #fcebed;
					}
				}
			}
			.best-rate {
				padding: 0.06rem 0.2rem 0;
				.user-info {
					margin-bottom: 0.2rem;
					&>i {
						font-size: 0.44rem;
						color: #de8042;
					}
					span {
						font-size: 0.26rem;
						color: #000;
						margin: 0 0.2rem;
					}
					.user-score {
						color: #e95751;
					}
				}
				.rate-message {
					font-size: 0.26rem;
					line-height: 1.5;
					color: #333;
					display: -webkit-box !important;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.purchase-rate {
					color: #999;
					margin: 0.2rem 0 0.55rem;
				}
				.check-rates {
					margin: 0 auto 0.5rem;
					height: 0.5rem;
					padding: 0 0.25rem;
					color: #ff5000;
					background-color: #fff;
					border-radius: 0.2rem;
					border: 1px solid #ff5000;
				}
			}
		}
		.about-shop {
			padding: 0.25rem 0.25rem 0.5rem 0.2rem;
			.shop-logo {
				margin-bottom: 0.2rem;
				.shop-portrait {
					width: 0.96rem;
					height: 0.96rem;
					margin-right: 0.24rem;
				}
				div {
					p {
						line-height: 1;
						font-size: 0.32rem;
						margin-bottom: 0.15rem;
					}
					span {
						display: inline-block;
						font-size: 0.2rem;
						color: #fff;
						padding: 0.03rem 0.08rem;
						background-color: #ea333f;
					}
				}
			}
			.shop-detail-info {
				margin-bottom: 0.5rem;
				.flex1 {
					height: 1.2rem;
					border-right: 1px solid #ddd;
					&:last-child {
						border-right: 0;
					}
					p {
						font-size: 0.32rem;
						color: #333;
						margin-bottom: 0.3rem;
					}
					&>span {
						font-size: 0.24rem;
						color: #999;
					}
					ul {
						li {
							color: #999;
							margin: 0.05rem 0;
							.score {
								color: #ff5000;
								margin: 0 0.1rem 0 0.15rem;
							}
							.grade {
								font-size: 0.20rem;
								display: inline-block;
								color: #fff;
								padding: 0.01rem 0.04rem;
								background-color: #ff5000;
							}
						}
					}
				}
			}
			.link-shop {
				height: 0.5rem;
				padding: 0 0.24rem;
				border-radius: 0.2rem;
				color: #ff5000;
				border: 1px solid #ff5000;
				background-color: #fff;
			}
		}
		.img-intro {
			.title {
				height: 0.8rem;
				background-color: #f4f4f4;
				.line {
					width: 0.9rem;
					height: 1px;
					background-color: #999;
				}
				.title-text {
					font-size: 0.26rem;
					color: #999;
					margin: 0 0.2rem;
				}
			}
			.img-box {
				background-color: #eee;
			}
		}
		.back-btn {
			position: absolute;
			top: 0.3rem;
			left: 0.3rem;
			z-index: 1;
			width: 0.5rem;
			height: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, .5);
			color: #FFFFFF;
		}
		.copun-panel {
			position: fixed;
			left: 0;
			right: 0;
			height: 60%;
			overflow-y: auto;
			background-color: #FFFFFF;
			z-index: 10;
			transition: bottom 200ms ease-in-out;
			border-top: 1px solid #FDF9F0;
			&.in {
				bottom: 0;
			}
			&.out {
				bottom: -60%;
			}
			h3 {
				text-align: center;
				color: #333333;
				font-weight: normal;
				font-size: 0.3rem;
			}
			.copun-item {
				width: 90%;
				margin: 0.2rem auto;
				background-color: #FF9900;
				border-radius: 0.1rem;
				display: flex;
				.get-btn {
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: center;
					border-left: 1px solid #DFDFDF;
				}
				.copun {
					flex: 1;
					padding: 0.2rem;
					h3 {
						color: #FFF4E8;
						text-align: left;
						font-size: 0.8rem;
						margin: 0;
						&:before {
							content: "￥";
							font-size: 0.24rem;
						}
					}
					p {
						color: #FFFFFF;
						font-size: 0.24rem;
					}
				}
			}
		}
		.dialog {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			z-index: 9;
			background-color: rgba(0, 0, 0, .4);
		}
		.param-panel {
			position: fixed;
			left: 0;
			right: 0;
			height: 60%;
			overflow-y: auto;
			background-color: #FFFFFF;
			z-index: 10;
			transition: bottom 200ms ease-in-out;
			border-top: 1px solid #FDF9F0;
			&.in {
				bottom: 0;
			}
			&.out {
				bottom: -60%;
			}
			h3 {
				text-align: center;
				color: #333333;
				font-weight: normal;
				font-size: 0.3rem;
			}
			.param-item {
				border-bottom: 1px solid #FDF9F0;
				width: 90%;
				margin: 0.2rem auto;
				span {
					display: inline-block;
					padding: 3px 7px;
					background-color: #DFDFDF;
					border-radius: 10px;
					margin-right: 0.12rem;
					margin-top: 0.12rem;
					&.active {
						color: #FFFFFF;
						background-color: #1891EE;
					}
				}
			}
			button {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				line-height: 0.8rem;
				background-color: #FF9900;
				color: #FFFFFF;
				border: none;
				outline: none;
				display: block;
				width: 100%;
			}
		}
		.detail-bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 5;
			background-color: #FFF4E8;
			border-top: 1px solid #FDF9F0;
			display: flex;
			align-items: center;
			span {
				flex: 1;
				line-height: 1rem;
				border-radius: 2px;
				text-align: center;
				&:first-child {
					background-color: #FFFFFF;
					color: #333333;
				}
				&:nth-child(2) {
					background-color: #FF9900;
					color: #FFFFFF;
				}
				&:last-child {
					background-color: #E4393C;
					color: #FFFFFF;
				}
			}
		}
		padding-bottom: 1rem;
		.num {
			display: flex;
			align-items: center;
			line-height: 0.6rem;
			justify-content: space-between;
			width: 90%;
			margin: 0.2rem auto;
			.input-number {
				position: relative;
				font-size: 0.3rem;
				width: 2rem;
				height: 100%;
				color: #333333;
				box-sizing: border-box;
				.iconfont {
					border: 1px solid #DDDDDD;
					border-top: 0;
					border-bottom: 0;
					box-sizing: border-box;
					font-weight: normal;
					color: #939393;
					width: 0.6rem;
					height: 0.6rem;
					text-align: center;
					position: absolute;
					top: 0;
					&.icon-sub {
						left: 0;
					}
					&.icon-plus {
						right: 0;
					}
				}
				input {
					box-sizing: border-box;
					width: 100%;
					height: 0.6rem;
					border: 1px solid #DDDDDD;
					text-align: center;
				}
			}
		}
	}
</style>